<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:replace="/common/header :: header"></div>
<style type="text/css">
	@media (min-width: 1025px){
	.order_put {width: 148px;margin-right: 4px}
	}
</style>
<body>

<div class="home_bac" id="app">
	<!--头部-->
	<div th:replace="/pc/home/common :: header"></div>

	<div class="home_mol">
		<div class="home_mtab">
			<p class="home_tit">Order</p>
			<div class="order_bot">
				<div class="order_iwp">
					<div class="clearfix layui-form">

						<!--<div class="clearfix order_put">
							<input type="text" class="order_time" id="txtBeginDate" >
							<img src="/images/a12.png" class="order_ptimg">
						</div>
						<p class="order-">-</p>-->
						<!--订单状态选择-->
						<div class="layui-inline order_put">
							<select lay-filter="order_type" v-model="order_type">
								<option value="0">order</option>
								<option value="1">ShuttleOrder</option>
								<option value="2">CharterOrder</option>
							</select>
						</div>
						<div class="layui-inline order_put">
							<select lay-filter="order_status" v-model="order_status" id="order_status_select">
								<option value="" selected="selected" >All</option>

								<option th:each="orderStatusCodeList : ${session.orderStatusCodeList}" th:value="${orderStatusCodeList.code}">[[${orderStatusCodeList.name}]]</option>

								<!--<option value="0">New</option>
								<option value="1">Confirmed</option>
								<option value="2">Pending</option>
								<option value="3">Rejected</option>
								<option value="4">Auction</option>
								<option value="5">Fail-Auction</option>
								<option value="6">Unpaid</option>
								<option value="7">Paid</option>
								<option value="8">OnService</option>
								<option value="9">Done</option>
								<option value="10">Invoice</option>
								<option value="11">Cancelled</option>
								<option value="12">Evaluation</option>
								<option value="13">DriverConfirm</option>
								<option value="14">Modified</option>-->
							</select>
						</div>
						<div class="clearfix order_put" style="width: 300px;">
							<input type="text" class="order_time" id="startAndEndTime"  style="width: 230px;">
							<img src="/images/a12.png" class="order_ptimg">
						</div>

						<div class="order_tbmt" v-on:click="search"><img src="/images/a14.png"></div>
					</div>

					<div class="clearfix order_uita">
						<a href="#" :class="active==0? 'active' : '' " v-on:click="addOrder">Add Order</a>
						<a href="#" v-if="order && (order.order_status==0 || order.order_status==2 )" :class="active==1 ? 'active' : '' " v-on:click="editOrder(order.order_id)" :data_id="order.order_id">Modify</a>
						<a href="#" v-if="order && (order.order_status==0 || order.order_status==2 )" v-on:click="updateOder(1)">Confirm</a>
						<a href="#" v-if="order && (order.order_status==0 || order.order_status==2 )" v-on:click="updateOder(10)">Cancel Order</a>
						<a href="#" v-if="order && order.order_status==6" v-on:click="payTheOrder()">Pay the Order</a>

					</div>
					<ul class="order_btpl" th:if="${data.orderList==null}" style="height: 40px;">
						<li class="clearfix">
							<div class="order_ohi" align="center">
								<p class="order_pbs" >NoData</p>
							</div>
						</li>
					</ul>
					<!--order 详情-->
					<ul class="order_btpl" th:if="${data.orderList[0].order_type==0}">
						<li class="clearfix">
							<p class="order_pbt">OrderId：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_prefix_name+order.order_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">OrderStatus：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_status_name}}</p>
							</div>
						</li>
						<!--<li class="clearfix">
							<p class="order_pbt">User_id：</p>
							<div class="order_ohi">
								<p class="order_pbs">Xiaotian,Wang</p>
							</div>
						</li>-->
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="游客联系人姓名" >ContactName：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.contact_name}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="游客联系人邮箱">EmailContact：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.contact_email}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="乘客、游客人数">Passengers：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.passengers}}</p>
							</div>
						</li>

						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="班车总人数、车载最大人数">CustoSum：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.custo_sum}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="司机电话">DriverPhone：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.driver_phone}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="承运商名称">CarrierName：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.carrier_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="承运商联系电话">CarrierPhone：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.carrier_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="订单创建时间">AddTime：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.add_time}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="启程时间：对应新增接车时间pick_up_time">TimeDepart：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.time_depart}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="从何处">FromWhere：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.fromwhere}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="订单凭证(折扣券号码)">OrderVoucher：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_voucher}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="额外要求">ExtraRequest：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.extra_request}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="经停地点1">Stop1：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.stop1}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="经停地点2">Stop2：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.stop2}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="经停地点3">Stop3：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.stop3}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="经停地点4">Stop4：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.stop4}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="经停地点5">Stop5：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.stop5}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="到哪里">ToWhere：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.towhere}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="返程时间">TimeReturn：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.time_return}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="预估时间(精确到秒,天时分秒)">EstTimeNeeded：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.est_time_needed}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="车辆类型">VehicleType：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.vehicle_type}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="车辆牌照">VehiclePlate：</p>
							<div class="order_ohi">
								<p class="order_pbs" v-text="order.vehicle_plate">{{order.vehicle_plate}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="费用、成本，顾客实际支付(去除打折部分)">CustoCosts：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.custo_costs}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="航班号">FlightId：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.flight_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="大件行李数量">BigLuggage：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.big_luggage}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="小件手提行李数量(随身行李)">CarryLuggage：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.carry_luggage}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="婴儿座椅 s:  4岁以下">Babyseats_s：</p>
							<div class="order_ohi">
								<p class="order_pbs"  >{{order.babyseats_s}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="婴儿座椅 b:  4岁以上">Babyseats_b：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.babyseats_b}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="是否需要拖车(Y/N)">Trailer：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.trailer}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="是否有通行费(Y/N)">Toll：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.toll}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="是否有消费税(Y/N - 选中Y的话,则价格乘以1.1,才能要求打印发票)">GST：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.GST}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="司机膳食及住宿(Y/N)">driver_DM：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.driver_DM}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="机场停车费(Y/N)">Airport Parking Fee：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.APF}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" tipsdata="国家公园门票(Y/N)">National Park Entry Fee：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.NPEF}}</p>
							</div>
						</li>
					</ul>
					<!--order shullteOrder 详情-->
					<ul class="order_btpl" th:if="${data.orderList[0].order_type==1}">
						<li class="clearfix">
							<p class="order_pbt">OrderId：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_id}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips">OrderStatus：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_status}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips">OrderType：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.order_type}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">CustoCosts：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.custo_costs}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt">total_money：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.total_money}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips" >ContactPhone：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.contact_phone}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips">EmailContact：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.contact_email}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips">Passengers：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.custo_sum}}</p>
							</div>
						</li>
						<li class="clearfix">
							<p class="order_pbt show_tips">CreateTime：</p>
							<div class="order_ohi">
								<p class="order_pbs" >{{order.insert_time}}</p>
							</div>
						</li>

					</ul>
					<div class="clearfix">
						<a v-if="page>1" href="#" :class="active==5 ? 'active PreOrder' : 'PreOrder' " v-on:click="preOrder"><</a>
						<a href="#" :class="active==6 ? 'active nextOrder' : ' nextOrder' " v-on:click="nextOrder">></a>
					</div>
				</div>
			</div>
		</div>
		<!--底部菜单-->
		<div th:replace="/pc/home/common :: home_foot"></div>
	</div>

</div>
<style>
	.nextOrder,.PreOrder{position: absolute;top: 50%;width: 40px;height: 40px;border-radius: 100%;border:1px solid #ffc20e;color:#ffc20e;text-align: center;line-height: 40px; font-size: 26px;}
	.nextOrder{right: 0;}
	.PreOrder{left: 0;}
</style>
<script th:inline="javascript">
	var url = Bus4uUtil.serverUrl+"pc/user/update";
	/*加载layui组件*/
	var laydate = null, laypage = null, layer = null, table = null, carousel = null, upload = null, element = null,form = null;
	layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element','form' ], function() {
		laydate = layui.laydate //日期
				, layer = layui.layer //弹层
				, form = layui.form
		//国际版
		/*laydate.render({
			elem: '#txtBeginDate'
			,lang: 'en'
			,btns:[ 'now', 'confirm']
			,value:new Date()
		});*/
		laydate.render({
			elem: '#startAndEndTime'
			,lang: 'en'
			,btns:[ 'now', 'confirm']
			/*,value:new Date()*/
			// ,type: 'datetime'
			,range: true
			,done: function(value, date, endDate){

				let strArr = value.split(" - ");
				if (strArr.length > 1) {
					app.startTime = strArr[0];
					app.endTime = strArr[1];
				}
			}
		});
		form.on('select(order_status)', function(data){
			console.log(data);
			app.order_status = data.value;

		});
		form.on('select(order_type)', function(data){
			console.log(data);
			app.order_status = data.value;
			window.location.href = '/home/order.html?order_type='+data.value;
		});

	});
	var orderList = JSON.parse('[[${data.orderList}]]');
	var app = new Vue({
		el:"#app",
		data:{
			order:orderList? orderList[0] : null, //订单
			startAndEndTime:"",//收索条件 时间
			order_status:"",//订单状态
			startTime:null,
			endTime:null,
			active:-1,//选中 btn
			page:1,//页码
			order_type:0 //order 类型
		},
		methods: {
			//搜素 订单
			search: function () {
				let self = this;
				// if (!this.startTime) {
				// 	layer.msg("时间范围未选择")
				// 	return false;
				// }
				// console.log("ajax调用搜索订单接口")
				$.ajax({
					url:Bus4uUtil.serverUrl+"/order/search",
					type:"post",
					data:{
						start:self.startTime,
						end:self.endTime,
						order_status:self.order_status,
						page:this.page,
						limit:1
					},
					success:function(d){
						if(d.code=="0"){
							if(d.result.data){
								self.order = d.result.data[0];

								layer.msg("搜索成功")
							}else{
								layer.msg("没有数据了")
							}
						}else{
							layer.msg(d.msg)
						}
					}
				});
			},
			//添加订单
			addOrder:function () {
				let self = this;
				self.active = 0;
				let w = $(window).width()>1024 ? '720px' : '100%';
				layer.open({
					type:2,
					title:'AddOrder',
					content:Bus4uUtil.serverUrl+"home/addOrder.html",
					area:[w,'100%'],
					cancel: function(index, layero){
						self.active = -1;
						layer.close(index);
						return false;
					},
					end:function(){
						// layer.msg("订单新增页面关闭自动执行订单状态为New的搜索");
						app.order_status="0";
						if(self.order_status!=null){
							$("#order_status_select").val(self.order_status);
						}else{
							$("#order_status_select").val("");
						}
						form.render();
						app.search();
						return false;
					}
				});
			},
			//修改订单
			editOrder:function (e) {

				var self = this;
				self.active = 1;
				let w = $(window).width()>1024 ? '720px' : '100%';
				layer.open({
					type:2,
					title:'EditOrder',
					content:Bus4uUtil.serverUrl+"home/editOrder.html?order_id="+e,
					area:[w,'100%'],
					cancel: function(index, layero){
						self.active = -1;
						layer.close(index);
						return false;
					}
				});
			},
			//下一条 订单
			nextOrder:function () {
				this.page++;
				let self = this;
				this.active = 6;
				$.ajax({
					url:Bus4uUtil.serverUrl+"/order/search",
					type:"post",
					data:{
						start:self.startTime,
						end:self.endTime,
						order_status:self.order_status,
						page:this.page,
						limit:1,
					},
					success:function(d){
						if(d.code=="0"){
							if(d.result.data){
								self.order = d.result.data[0];
								layer.msg("搜索成功")

								//当分页条数 >= 条数时,隐藏下一条
								console.log("page="+self.page)
								console.log("count="+d.result.count)
								if(self.page >= d.result.count){
									$(".nextOrder").hide();
								}else{
									$(".nextOrder").show();
								}

							}else{
								layer.msg("没有数据了")
							}
						}else{
							layer.msg(d.msg)
						}
					}
				});

			},
			//上一条 订单
			preOrder:function () {
				this.page--;
				let self = this;
				this.active = 5;
				$.ajax({
					url:Bus4uUtil.serverUrl+"/order/search",
					type:"post",
					data:{
						start:self.startTime,
						end:self.endTime,
						order_status:self.order_status,
						page:this.page,
						limit:1,
					},
					success:function(d){
						if(d.code=="0"){
							if(d.result.data){
								self.order = d.result.data[0];
								layer.msg("搜索成功")


								if(self.page <= 1){
									$(".PreOrder").hide();
								}

								if(self.page >= d.result.count){
									$(".nextOrder").hide();
								}else{
									$(".nextOrder").show();
								}

							}else{
								layer.msg("没有数据了")
							}
						}else{
							layer.msg(d.msg)
						}
					}
				});
			},

			//修改订单
			updateOder:function(n){
				let that = this;
				if(n==10){
					layer.confirm('你确定要取消这条订单吗?', {icon: 3, title:'提示'}, function(index){
						$.ajax({
							url:Bus4uUtil.serverUrl+"/order/update",
							type:"post",
							data:{
								"order_id":that.order.order_id,
								"order_status":n
							},
							success:function(d){
								if(d.code=="0"){
									layer.msg("操作成功");
									parent.location.reload();
								}else{
									layer.msg(d.msg)
								}
							}
						});
						layer.close(index);
					});
					
				}else{
					$.ajax({
						url:Bus4uUtil.serverUrl+"/order/update",
						type:"post",
						data:{
							"order_id":that.order.order_id,
							"order_status":n
						},
						success:function(d){
							if(d.code=="0"){
								layer.open({
									icon: 1,
									closeBtn: 0,
									content: 'Thank You , Order Accepted,  will give you our best price very soon'
									,btn: ['确定']
									,yes: function(index, layero){
										layer.close(index);
										parent.location.reload();
									}
								});

							}else{
								layer.msg(d.msg)
							}
						}
					});
				}


			},
			//支付订单
			payTheOrder:function(){
				let that = this;
				// console.log(that.order.order_id);
				location.href=Bus4uUtil.serverUrl+"/order/payTheOrder/"+that.order.order_id+".html";
				// $.ajax({
				// 	url:Bus4uUtil.serverUrl+"/order/update",
				// 	type:"post",
				// 	data:{
				// 		"order_id":that.order.order_id,
				// 		"order_status":n
				// 	},
				// 	success:function(d){
				// 		if(d.code=="0"){
				// 			layer.msg("操作成功");
				// 			parent.location.reload();
				// 		}else{
				// 			layer.msg(d.msg)
				// 		}
				// 	}
				// });
			}
		},
	});

</script>
</body>
</html>
